<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <el-card>
          <template #header>
            <h3>客服设置</h3>
          </template>
          <div class="kva-form-search" style="display: flex; justify-content: center">
            <el-form-item label="客服链接：" prop="clientUrl">
              <div style="display: flex; justify-content: center">
                <el-input
                  v-model="form.clientUrl"
                  placeholder="请输入标题..."
                  style="width: 400px; margin-right: 10px"
                  maxlength="100"
                  clearable
                />
                <el-button type="primary" icon="Plus" :loading="editLoading" @click.prevent="handleSave"
                  >保存</el-button
                >
              </div>
            </el-form-item>
          </div>
          <div class="kva-form-search" style="display: flex; justify-content: center">
            <el-form-item label="客服开关：" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">打开</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-card>
      </home-page-header>
    </div>
  </div>
</template>

<script setup>
  import KVA from '@/utils/kva.js'
  import { getById, saveUpdate } from '@/api/userclient.js'

  // 搜索属性定义
  const form = ref({
    id: 1,
    title: '客服链接',
    clientUrl: '',
    status: 1
  })

  const editLoading = ref(false)

  const handleGetDetail = async () => {
    editLoading.value = true
    const resp = await getById(form.value.id)
    form.value = resp.data
    editLoading.value = false
  }

  const handleSave = async () => {
    editLoading.value = true
    await saveUpdate(form.value)
    KVA.success('保存成功！')
    editLoading.value = false
  }

  onMounted(() => {
    handleGetDetail()
  })
</script>
